<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type"content=" text/hyml;charset=utf-8" />
        <title>圣杯布局/双飞翼布局</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
                text-align: center;
            }
            .top
            {
                background-color:aqua;
                height: 50px;
            }
           .all
            {
                width:600px;
                margin:0 auto;
                
            }
            .main
            {
                margin-left:100px;
                margin-right:150px;
            }
            .left
            {
                 background-color: #f00;
                width:100px;
                float:left;
                position: relative;
                left:-100px;
                padding-bottom: 500px;
23     　　margin-bottom: -500px;
            }
            .content
            {
                background-color: #0f0;
                float:left;
                width:100%;
                margin-left: -100px;
                padding-bottom: 500px;
23     　　      margin-bottom: -500px;
            }
            .right
            {
                 background-color: #00f;
                width:150px;
                float:left;
                margin-left: -150px;
                position: relative;
                left:150px;
                padding-bottom: 500px;
23     　　      margin-bottom: -500px
            }
            .foot
            {
                 background-color:bisque;
                clear:both;
                height: 50px;
            }
          
            
        </style>
    </head>
    <body>
        <div class="all">
        <div class="top">top</div>
        <div class="main">
            <div class="left">left</div>
            <div class="content">content</div>
            <div class="right">right</div>
        </div>
        <div class="foot">foot</div>
        </div>
    </body>
</html>